<!DOCTYPE html>
<html>

<head>
    <title>千锋教育——做真实的自己,用心做教育</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header></header>
    <section>
        <!-- banner图 -->
        <div class="container-fulid banner ">
            <div class="banner-img">
                <div class="swiper">
                    <!-- <img src="https://production-oss.oss-cn-shanghai.aliyuncs.com/2021/10/19/3de870d.jpg?1634633185#w" alt="">
                    <img src="https://production-oss.oss-cn-shanghai.aliyuncs.com/2021/10/11/1dd87d3.jpg?1633923270#w" alt="">
                    <img src="https://production-oss.oss-cn-shanghai.aliyuncs.com/2021/09/24/dab0673.jpg?1632468809#w" alt="">
                    <img src="https://production-oss.oss-cn-shanghai.aliyuncs.com/2021/04/09/01c1f87.jpg?1617960209#w" alt="">
                    <img src="./images/banner4.jpg" alt="">
                    <img src="https://production-oss.oss-cn-shanghai.aliyuncs.com/2021/10/19/3de870d.jpg?1634633185#w" alt=""> -->
                </div>
                <div id="previous">
                    <img src="./images/prve.png" alt="">
                </div>
                <div id="next">
                    <img src="./images/next.png" alt="">
                </div>
                <div class="btn">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <!-- 优惠-->
        <div class="container-fulid discount">
            <div class="top">
                <div class="dis_l l">
                    <img src="./images/dis_l.jpg" alt="">
                    <div class="text">
                        <h4>「清透润白」小美盒
                        </h4>
                        <p>由内净透肌肤，释放通透光芒</p>
                        <span>立即拥有</soan>
                    </div>
                </div>
                <div class="dis_r r">
                    <img src="./images/dis_r.jpg" alt="">
                    <div class="text1">
                        <h4>舒缓调理系列
                        </h4>
                        <p>44年敏肌调理专研，强韧脆弱肌屏障，拯救问题肌</p>
                        <span>了解更多</soan>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <ul>
                    <li><a href="#">
                            <img src="images/bottom_03.jpg" alt="">
                            <h5>实付满588包邮</h5>
                            <p>购任意正装即享</p>
                        </a></li>
                    <li><a href="#">
                            <img src="images/bottom_05.jpg" alt="">
                            <h5>免费试用</h5>
                            <p>买即选3件明星试用</p>
                        </a></li>
                    <li><a href="#">
                            <img src="images/bottom_07.jpg" alt="">
                            <h5>会员俱乐部</h5>
                            <p>积分兑明星礼</p>
                        </a></li>
                    <li><a href="#">
                            <img src="images/bottom_09.jpg" alt="">
                            <h5>特别活动</h5>
                            <p>官网独享</p>
                        </a></li>
                </ul>
            </div>
        </div>
        <!-- 精选 -->
        <div class="container-fulid selected">
            <div class="container">
                <div class="title">
                    <p class="title_con">
                        <img src="./images/1.png" alt="">
                        <span>精选推荐</span>
                        <img src="./images/2.png" alt="">
                    </p>
                </div>
                <ul>
                    <li><a href="list.html">
                            <img src="images/select1.jpg" alt="">
                            <h4>面部护理</h4>
                            <p>了解更多
                                <i></i>
                            </p>
                        </a></li>
                    <li><a href="list.html">
                            <img src="images/select2.jpg" alt="">
                            <h4>彩妆系列</h4>
                            <p>了解更多
                                <i></i>
                            </p>
                        </a></li>
                    <li><a href="list.html">
                            <img src="images/select3.jpg" alt="">
                            <h4>身体护理</h4>
                            <p>了解更多
                                <i></i>
                            </p>
                        </a></li>
                    <li><a href="list.html">
                            <img src="images/select4.jpg" alt="">
                            <h4>纹路护理</h4>
                            <p>了解更多
                                <i></i>
                            </p>
                        </a></li>
                </ul>
            </div>
        </div>
        <!-- 单品 -->
        <div class="container-fulid goods">
            <div class="container">
                <div class="tobs">
                    <a href="javascript:void(0)" class="act">明星单品</a>
                    <a href="javascript:void(0)" class="act1">超值套组</a>
                    <a href="javascript:void(0)" class="act2">新品上市</a>
                </div>
                <div class="box">
                    <input id="btn-previous" type="button" value="<" />
                    <input id="btn-next" type="button" value=">" />
                    <ul class="box-good">
                        <!-- <li><a href="./detail.html">
                                <div class="imgs">
                                    <img src="https://production-oss.oss-cn-shanghai.aliyuncs.com/2021/05/24/c72cf24.jpg?1621859219#h"
                                        alt="「黄金双萃」双萃焕活修护精华露 套装">
                                    <span class="p">加入购物车</span>
                                </div>
                                <h5>「黄金双萃」双萃焕活修护精华露 套装</h5>
                                <p>￥960.0</p>
                            </a></li> -->
                    </ul>
                    <div class="box-wrap">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 理念 -->
        <div class="container-fulid idea">
            <div class="container">
                <div class="title">
                    <p class="title_con">
                        <s></s>
                        <img src="./images/1.png" alt="">
                        <span>CLARINS的理念和承诺</span>
                        <img src="./images/2.png" alt="">
                        <s class="s"></s>
                    </p>
                </div>
                <div class="idea-contant">
                    <img src="https://production-oss.oss-cn-shanghai.aliyuncs.com/2021/03/26/0f5cf6c.jpg?1616750905#w"
                        alt="">
                </div>
            </div>
        </div>
        <!-- 测评 -->
        <div class="container-fulid access">
            <div class="container">
                <div class="title">
                    <p class="title_con">
                        <s></s>
                        <img src="./images/1.png" alt="">
                        <span>测评中心</span>
                        <img src="./images/2.png" alt="">
                        <s class="s"></s>
                    </p>
                </div>
                <div class="access-content">
                    <input id="btn-prev" type="button" value="<" />
                    <input id="btn-nexts" type="button" value=">" />
                    <div class="access-wrap">
                        <ul>
                            
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div class="back_top">
            <img src="./images/top.png" alt="">
        </div>
    </section>
    <footer></footer>
</body>
</html>
<script src="./js/jQuery.js"></script>
<script src="./js/cookie.js"></script>
<script src="./js/banner.js"></script>
<script src="./js/srcoll.js"></script>
<script src="./js/fy.js"></script>
<script src="./js/assess.js"></script>
<script>
    // 引入头部和尾部
    $("header").load("header.html");
    $("footer").load("footer.html");
</script>